<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            *{
                padding: 0;
                margin: 0;
                list-style: none;
            }
            ul{
                width: 500px;
                height: 500px;
                margin: 50px auto;
                
            }
            li{
                width: 150px;
                height: 150px;
                background: skyblue;
                float: left;
                margin: 5px;
                text-align: center;
                font-size: 20px;
                font-weight: bold;
                line-height: 150px;
            }
            .bad{
                width: 150px;
                height: 150px;
                background: #666;
            }
            .bad2{
                width: 150px;
                height: 150px;
                background: rgba(41, 65, 202, 0.664);
            }

        </style>
    </head>
    <body>
        <ul id="use">
            <li>谢谢惠顾</li>
            <li>再来一次</li>
            <li>谢谢惠顾</li>
            <li>京东5元代金券</li>
            <li><button id="new">开始</button> <button id="new2">结束</button></li>
            <li>0.5块</li>
            <li>谢谢惠顾</li>
            <li>谢谢惠顾</li>
            <li>20块</li>
        </ul>
        <script>
            var b1=document.getElementById("new");
            var b2=document.getElementById("new2");
            var ul1=document.getElementById("use");
            var num=-1;
            var lis=document.getElementsByTagName("li");
            var time
            b1.onclick=function(){
                
                time=setInterval(function(){
                    // lis.arr[num].className="";
                    lis[0].className="bad"; 
                    num++;
                    if(num>9){
                        num=0;
                    }
                   
                    lis[num-1].className="bad2";
                    lis[num].className="bad3"; 
                    lis[0].className="bad4"; 
                    if(num==4){
                        lis[4].className="bad5";
                    }
                },50)
            }
            b2.onclick=function(){
                clearInterval(time)
                
            }

        </script>
    </body>
</html>